<template>
	<view>
		<view class="right-box">
			<view class="u-flex u-row-between">
				<view class="c-fff u-line-5 width70">{{name}}</view>
				<view class="gird" :style="{paddingBottom:padding}">
					<view v-for="(item,index) in list" :key="index" @click="click(index)" class="u-m-t-50">
						<u-icon :name="item.icon" color="#fff" size="68" labelColor="#fff" :label="item.name" margin-top="20" labelPos="bottom"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bottomRight',
		props: {
			list: {
				type: Array,
				default: function() {
					return [];
				}
			},
			padding:{
				type:String,
				default:'100rpx'
			},
			name: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			}
		},

		methods: {
			click(index) {
				this.$emit('click',index)
			}
		}
	}
</script>

<style lang="scss">
	.right-box {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 30rpx;
	}

	.gird {
		display: inline-grid;
	}
	.width70{
		width: 70%;
	}
</style>
